<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热量健身-首页</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <section class="wrap">
        <!-- 顶部搜索 -->
        <div class="search-index">
            <div class="search">搜索食物热量</div>
            <a href="#">
                <img src="images/反馈.PNG" alt="">
            </a>
        </div>

        <!-- 健身记录模块 -->
        <div class="content">
            <!-- 饮食记录 -->
            <div class="record jindu">
                <img src="images/饮食记录.PNG" alt="">
                <span>饮食记录 <br><a href="#">累计3天</a> </span>
                <p>900/1900 <a>千卡</a></p>
                <h4>控制食量，坚持记录</h4>
                <div class="gecan">
                    <span>早</span>
                    <span>中</span>
                    <span>晚</span>
                    <span>加</span>
                </div>
                <div class="container">
                    <div class="fan">0</div>
                </div>
                <div class="container zhong">
                    <div class="fan f">0</div>
                </div>
                <div class="container wan">
                    <div class="fan a">0</div>
                </div>
                <div class="container jia">
                    <div class="fan a">0</div>
                </div>
            </div>

            <!-- 体重记录 -->
            <div class="record">
                <img src="images/体重记录.PNG" alt="">
                <span>体重记录 <br><a href="#">连续3天</a> </span>
                <p>55.0 <a>kg</a></p>
                <h4>本周目标：54.5kg</h4>
                <button>去称重</button>
            </div>

            <!-- 锻炼记录 -->
            <div class="record duanlian">
                <img src="images/锻炼记录.PNG" alt="">
                <span>锻炼记录 <br><a href="#">本周：2/4</a> </span>
                <p>90 <a>min</a></p>
                <h4>当日锻炼时长</h4>
            </div>

            <!-- 喝水记录 -->
            <div class="record heshui">
                <img src="images/喝水记录.PNG" alt="">
                <span>喝水记录 <br><a href="#">累计3天</a> </span>
                <p>500/3000 <a>ml</a></p>
                <h4>多喝水有助于减肥</h4>
            </div>

            <!-- 步数记录 -->
            <div class="record duanlian">
                <img src="images/步数记录.PNG" alt="">
                <span>步数记录 <br><a href="#">累计3天</a> </span>
                <p>5000/6000 <a>步</a></p>
                <h4>不积跬步，无以至千里</h4>
            </div>

            <!-- 围度记录 -->
            <div class="record heshui">
                <img src="images/围度记录.PNG" alt="">
                <span>围度记录 <br><a href="#">本周：0/1</a> </span>
                <p>0 <a>cm</a></p>
                <h4>当日围度</h4>
            </div>

        </div>

    </section>

    <footer class="footer">
        <a href="index.html" class="item remen">
            <img src="images/首页.png" alt="">
            <p>首页</p>
        </a>
        <a href="#" class="item">
            <img src="images/食谱.png" alt="">
            <p>食谱</p>
        </a>
        <a href="#" class="item">
            <img src="images/锻炼.png" alt="">
            <p>锻炼</p>
        </a>
        <a href="indexindex.html" class="item">
            <img src="images/我的.png" alt="">
            <p>我的</p>
        </a>
    </footer>
</body>

</html>